<script>
export default {
  name: 'BorderContainer',
  props: {
    length: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
    direction: {
      type: String,
      default: 'left',
      validator (val) {
        return ['left', 'right'].includes(val)
      }
    }
  },
  render (createElement) {
    let isLeft = this.direction === 'left'
    let leftStyle = {
      width: !isLeft ? '100%' : this.length + 'px'
    }
    let rightStyle = {
      width: isLeft ? '100%' : this.length + 'px'
    }
    return createElement('div', {
      'class': 'border-container clearfix'
    }, [
      createElement('div', {
        'class': 'fl',
        style: leftStyle
      }, [this.$slots.left]),
      createElement('div', {
        'class': 'fl',
        slot: 'right',
        style: rightStyle
      }, [this.$slots.right])
    ])
  }
}
</script>
